<template>
  <panel title="活期类" class="due-on-demand">
    <swiper :options="swiperOption" class="main-swiper">
      <!-- slides -->
      <swiper-slide class="swiper-item">
        <dl class="item">
          <dt>百信智惠存</dt>
          <dd>4.100%</dd>
          <dd>今日支取收益率</dd>
          <dd>当日起息 随存随取</dd>
        </dl>
      </swiper-slide>
      <swiper-slide class="swiper-item">
        <dl class="item">
          <dt>长江天天赢</dt>
          <dd>3.563%</dd>
          <dd>七日年化收益率</dd>
          <dd>灵活存取</dd>
        </dl>
      </swiper-slide>
      <swiper-slide class="swiper-item">
        <dl class="item">
          <dt>富民宝</dt>
          <dd>4.100%</dd>
          <dd>今日支取收益率</dd>
          <dd>当日起息 随存随取</dd>
        </dl>
      </swiper-slide>
    </swiper>
  </panel>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Panel from '@/components/core/panel.vue'

export default {
  name: 'due-on-demand',
  components: { Panel, swiper, swiperSlide },
  data () {
    return {
      swiperOption: {
          slidesPerView: 'auto',
          // spaceBetween: 30,
          freeMode: true,
          pagination: {
            clickable: true
          }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.due-on-demand {
  .main-swiper {
    &:last-child {
      margin-right: 20px;
    }
    .swiper-item {
      width: 280px;
      box-sizing: border-box;
      text-align: center;
      font-size: 24px;
      border: 1px solid #ccc;
      margin-left: 20px;
      // box-shadow: 0 0 0 3px;
      .item {
      dt {
          font-size: 30px;
          font-weight: 700;
          line-height: 70px;
          color: #646C6D;
        }
        :nth-child(2) {
          color: #FA5050;
          font-size: 45px;
          line-height: 55px;
        }
        :nth-child(3) {
          color: #9297A1;
          line-height: 1.5;
          margin-bottom: 10px;
        }
        :nth-child(4) {
          display: inline-block;
          color: #CFB379;
          padding: 4px 6px;
          font-weight: 700;
          border: 1px solid #CFB379;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
